<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8" />
<title>15.1 Retrieve All Contacts</title>
<script>
// Initialize the page function
function init() {
// set the button handler
var btnFindAll = document.getElementById('findAll');
btnFindAll.addEventListener('click',findAllContacts,false);
}
// Success callback function for finding contacts
function contactsFindSuccess(contacts) {
// Get reference to our div for displaying the results
var divResults = document.getElementById('divResults');
// Loop through the contacts results
for (var i in contacts) {
// For each contact loop through any phone numbers
for (var j in contacts[i].phoneNumbers) {
// Check if the phone number is a mobile number
if (contacts[i].phoneNumbers[j].type === 'mobile') {
// Display the contact name and phone number
divResults.innerHTML += contacts[i].displayName + '(' + contacts[i].phoneNumbers[j].value + ')';
}
}
}
}
// Error callback function for finding contacts
function contactsError(error) {
// Handle the error appropriately, in this case just display
alert(error.code);
}
// Function to find the contacts
function findAllContacts() {
// Check if the Contacts API is available
if (navigator.contacts) {
// set the array of fields to retrieve
var arrFields = ['displayName', 'phoneNumbers'];
// perform the find method on the contacts
navigator.contacts.find(arrFields, contactsFindSuccess, contactsError);
} else {
// let the user know that the Contacts API is not supported
alert('The Contacts API is not supported in this browser... yet');
}
}
// Initialize the page on load
window.addEventListener('load',init,false);
</script>
</head>
<body>
<h1>Retrieve all contacts with mobile phone numbers</h1>
<button id="findAll" type="button">find all contactss</button>
<div id="divResults"></div>
</body>
</html>